<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            <img src="/static/image/logo.png" alt />
          </div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              <span>Item 888</span>
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout style="height:calc(100vh - 70px)">
        <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
          <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
            <MenuItem name="1-1">
              <Icon type="md-desktop" />
              <span>平台首页</span>
            </MenuItem>
            <MenuItem name="1-2" to="/userlist">
              <Icon type="ios-book-outline" />
              <span>档案管理</span>
            </MenuItem>
            <MenuItem name="1-3">
              <Icon type="md-list" />
              <span>档案分类管理</span>
            </MenuItem>
            <MenuItem name="1-4">
              <Icon type="md-pie" />
              <span>档案查询与统计</span>
            </MenuItem>
            <MenuItem name="1-5">
              <Icon type="md-flag" />
              <span>档案编码与检索</span>
            </MenuItem>
            <MenuItem name="1-6">
              <Icon type="md-paper" />
              <span>档案借阅与归还</span>
            </MenuItem>
            <MenuItem name="1-7">
              <Icon type="md-copy" />
              <span>档案扫描与入库</span>
            </MenuItem>
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <router-view></router-view>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 200px;
  height: 100%;
  background: #4b76cf;
  float: left;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.layout-logo img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}

/* 修改 */
.ivu-layout-header {
  margin: 0;
  padding: 0;
}

.ivu-menu-horizontal {
  height: 100%;
}

.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.1s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
</style>
